<template>
  <button class="v-checkbox" :checked="checked" @click="toggle" ref="input">
    <div class="inner">
      <v-icon type="checked"/>
    </div>
    <label>{{label}}</label>
  </button>
</template>


<script>
export default {
  model: {
    prop: "selected"
  },
  props: {
    selected: {
      default() {
        return [];
      }
    },
    value: null,
    label: {
      default: ""
    }
  },
  computed: {
    hasParent() {
      return this.$parent.$options._componentTag == "v-checkbox-group";
    },
    list() {
      return this.hasParent ? this.$parent.selected : this.selected;
    },
    checked() {
      return this.indexOf() != -1;
    }
  },
  methods: {
    indexOf() {
      for (let i in this.list) if (this.list[i] == this.value) return i;
      return -1;
    },
    toggle() {
      this.checked
        ? this.list.splice(this.indexOf(), 1)
        : this.list.push(this.value);
      this.hasParent
        ? (this.$parent.selected = this.list)
        : this.$emit("input", this.list);
    }
  }
};
</script>


<style lang="less">
.v-checkbox {
  border: none;
  outline: none;
  padding: 0px;
  margin: 0px 5px;
  font-size: inherit;
  white-space: nowrap;
  background-color: #ffffff;
  > .inner {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid #cccccc;
    > i {
      width: 100%;
      height: 100%;
      content: "";
      display: block;
      color: #ffffff;
      border-radius: 2px;
      background-color: transparent;
      transform: scale(0.5);
      transition: 300ms;
      &::before {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  > label {
    vertical-align: middle;
  }
  &[checked] {
    > .inner {
      width: 16px;
      height: 16px;
      border-width: 1px;
      border-color: #fab24c;
      > i {
        transform: scale(1);
        background-color: #fab24c;
      }
    }
  }
}
</style>
